<template>
  <div>


    <div class="p_chart" ref="lamp_electricenergy"></div>
  </div>
</template>

<script>
import { deviceElectricalHistory } from "@/api/iot/deviceLog";
const querydays = [1, 7, 15, 30];
export default {
  props: {
    energyanalysisinfo: {
      type: Object,
    },
  },
  name: "energyanalysisinfo",
  data() {
    return {
      timeslot: {
        starttime: "",
        endtime: "",
      },
      data: [],
      querydaynum: 0,
      electricenergydata: {
        time: [],
        dayelectric: [],
        totalelectric: [],
      },
    };
  },
  mounted() {
    this.refreshdata();
    
  },
  methods: {
    cal_timeslot(daynum, date) {
      var end = new Date(date);
      var start = new Date(date);
      start.setTime(start.getTime() - 3600 * 1000 * 24 * daynum);
      this.timeslot.endtime = this.FormatDate(end, "yyyy-MM-dd");
      this.timeslot.starttime = this.FormatDate(start, "yyyy-MM-dd");
    },
    timeadd() {
      this.querydaynum++;
      if (this.querydaynum < querydays.length) {
        this.refreshdata();
      } else {
        this.querydaynum = querydays.length - 1;
      }
    },
    timereduce() {
      if (this.querydaynum > 0) {
        this.querydaynum--;
        this.refreshdata();
      }
    },
    refreshdata() {
      this.electricenergydata = {
        time: [],
        dayelectric: [],
        totalelectric: [],
      };

      if (
        this.energyanalysisinfo.collectionTime != null &&
        this.energyanalysisinfo.collectionTime != ""
      ) {
        this.cal_timeslot(
          querydays[this.querydaynum],
          this.energyanalysisinfo.collectionTime
        ); //查询1天数据
      }else{
        let date = new Date()
        this.cal_timeslot(
          querydays[this.querydaynum],
          date
        ); 
      }
      var that = this;
      var data = {};
      data.serialNumber = '202422113334';
      data.beginTime = that.timeslot.starttime;
      data.endTime = that.timeslot.endtime;
      deviceElectricalHistory(data).then((res) => {
        if (res.code == 200) {
          that.electricenergydata = {
            time: [],
            dayelectric: [],
            totalelectric: [],
          };
          let Energy = res.rows.find(
            (item) => item.thingsModelName == "DRA_Energy"
          );
          if (Energy) {
            for (let i in Energy.list) {
              that.electricenergydata.time.push(Energy.list[i].datatime);
              that.electricenergydata.totalelectric.push(
                Energy.list[i].thingsModelvalue
              );
            }
          }
          that.series = [
            {
              //name: '日累计消耗电能',
              name:
                sessionStorage.lang == "zh-cn"
                  ? "累计消耗电能"
                  : "Cumulative power consumption",
              type: "line",
              yAxisIndex: 1,
              barMaxWidth: 30,
              data: that.electricenergydata.totalelectric,
              unit: "kW*h",
            },
            // {
            //   name:
            //     sessionStorage.lang == "zh-cn"
            //       ? "日消耗电能"
            //       : "Daily electricity consumption",
            //   type: "bar",
            //   barMaxWidth: 30,
            //   data: that.electricenergydata.dayelectric,
            //   unit: "kW*h",
            // },
          ];
          let myChart = that.$echarts.init(that.$refs.lamp_electricenergy);
          let option = {
            tooltip: {
              trigger: "axis",
              formatter: function (params) {
                var relVal = params[0].name;
                for (var i = 0, l = params.length; i < l; i++) {
                  if (params[i].value != undefined && params[i].value !="") {
                  relVal +=
                    "<br/>" +
                    params[i].marker +
                    params[i].seriesName +
                    " : " +
                    params[i].value +
                    that.series[params[i].seriesIndex].unit;
                  }
                }
                return relVal;
              },
              axisPointer: {
                type: "cross",
                crossStyle: {
                  color: "#999",
                },
              },
            },
            toolbox: {
              show: true,
              feature: {
                dataZoom: {
                  yAxisIndex: "none",
                  title: {
                    zoom:
                      sessionStorage.lang == "zh-cn" ? "区域缩放" : "Area Zoom",
                    back:
                      sessionStorage.lang == "zh-cn"
                        ? "区域缩放还原"
                        : "Area Zoom Restore",
                  },
                },
                // dataView: {
                //   readOnly: false,
                //   title:
                //     sessionStorage.lang == "zh-cn" ? "数据视图" : "Data View",
                //   optionToContent: function (opt) {
                //     var axisData = opt.xAxis[0].data;
                //     var series = opt.series;
                //     var tdHeads =
                //       '<td  style="padding:0 10px;">' +
                //       that.$t(
                //         "title.tunnellightingsystem_systemmanagement_title_pointoftime"
                //       ) +
                //       "</td>";
                //     series.forEach(function (item) {
                //       tdHeads +=
                //         '<td style="padding: 0 10px;">' +
                //         item.name +
                //         "</td>";
                //     });
                //     var table =
                //       '<table border="1" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center;"><tbody><tr>' +
                //       tdHeads +
                //       "</tr>";
                //     var tdBodys = "";
                //     for (var i = 0, l = axisData.length; i < l; i++) {
                //       for (var j = 0; j < series.length; j++) {
                //         if (typeof series[j].data[i] == "object") {
                //           tdBodys += "<td>" + series[j].data[i] + "</td>";
                //         } else {
                //           tdBodys += "<td>" + series[j].data[i] + "</td>";
                //         }
                //       }
                //       table +=
                //         '<tr><td style="padding: 0 10px>' +
                //         axisData[i] +
                //         "</td>" +
                //         tdBodys +
                //         "</tr>";
                //       tdBodys = "";
                //     }
                //     table += "</tbody></table>";
                //     return table;
                //   },
                // },
                // magicType: {
                //   type: ["line", "bar"],
                //   title: {
                //     //line:'切换为折线图',
                //     line:
                //       sessionStorage.lang == "zh-cn"
                //         ? "切换为折线图"
                //         : "Switch to line chart",
                //     //bar:'切换为柱状图'
                //     bar:
                //       sessionStorage.lang == "zh-cn"
                //         ? "切换为柱状图"
                //         : "Switch to bar chart",
                //   },
                // },
                restore: {
                  title: sessionStorage.lang == "zh-cn" ? "还原" : "Revert",
                },
                saveAsImage: {
                  title:
                    sessionStorage.lang == "zh-cn"
                      ? "保存为图片"
                      : "Save As Image",
                },
              },
            },
            legend: {
              //data: ['日消耗电能', '日累计消耗电能']
              data:
                sessionStorage.lang == "zh-cn"
                  ? ["日消耗电能", "日累计消耗电能"]
                  : [
                      "Daily electricity consumption",
                      "Cumulative power consumption",
                    ],
            },
            grid: {
              left: "4%",
              right: "5%",
              bottom: "5%",
              containLabel: true,
            },
            xAxis: [
              {
                type: "category",
                boundaryGap: true,
                data: that.electricenergydata.time,
              },
            ],
            yAxis: [
              {
                type: "value",
                //name: '累计电能',
                name:
                  sessionStorage.lang == "zh-cn"
                    ? "消耗电能"
                    : "Consumption of electrical energy",
                axisLabel: {
                  formatter: "{value} kW·h",
                },
              },
              {
                type: "value",
                //name: '日电能',
                name:
                  sessionStorage.lang == "zh-cn"
                    ? "累计消耗电能"
                    : "Accumulated energy consumption",
                axisLabel: {
                  formatter: "{value} kW·h",
                },
              },
            ],
            series: that.series,
          };
          myChart.setOption(option);
        }
      });
    },
  },
};
</script>

<style scoped>
.p_chart {
  width: 95%;
  height: 255px;
  padding: 1px 2px;
  margin-top: 1px;
  margin-left: 30px;
}
</style>
